body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(270deg, #e0cae3, #fad0c4, #7573ec, #ff9a9e,#9a6b97,#add8e6);
    background-size: 600% 600%;
    animation: gradient 30s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

#game-container {
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    overflow: hidden;
}

canvas {
    background-color: transparent;
    display: block;
}

#controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

button {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 20px;
    margin: 5px 0;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
    border-radius: 20px;
}

button:hover {
    background: rgba(255, 255, 255, 0.2);
}

#score-box {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 20px;
    margin: 5px 0;
    text-align: center;
    font-size: 16px;
    border-radius: 20px;
}

#personal-card {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: #91affc00;
    border: 2px solid #ffffff9f;
    color: #000;
    padding: 8px;
    margin: 0;
    text-align: center;
    font-size: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#share-container, #share, #share:hover {
    /* Removed share button styles */
} 